<template>
  <div class="orders-component">
    <el-card class="box-card">
<!--    展示订单信息的可展开表格-->
      <el-table
        :data="ordersList"
        style="width: 100%">
        <el-table-column type="expand">
          <template v-slot:default="scope">
            <div>承担快递：{{ scope.row.com ? scope.row.com : '等待收货'}}</div>
            <div>物流状态：{{ scope.row.state }}</div>
            <div>下单时间：{{ scope.row.time.split('.')[0].replace('T', ' ') }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="订单号"
          width="80"
          prop="orderid">
        </el-table-column>
        <el-table-column
          label="商品名"
          width="400"
          prop="goodsname">
        </el-table-column>
        <el-table-column
          label="数量"
          width="80"
          prop="count">
        </el-table-column>
        <el-table-column
          label="商品属性"
          prop="choicename">
        </el-table-column>
        <el-table-column
          label="金额"
          width="120"
          >
          <template v-slot:default="scope">
            &yen; {{ scope.row.price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          label="收件人"
          prop="person">
        </el-table-column>
        <el-table-column
          label="联系方式"
          prop="tel">
        </el-table-column>
        <el-table-column
          label="收货地址"
          prop="address">
        </el-table-column>
        <el-table-column
          label="状态">
          <template v-slot:default="scope">
            <el-button v-if="scope.row.finish" type="primary" icom="el-icon-check">已完成</el-button>
            <el-button v-else type="danger" icon="el-icon-close">未完成</el-button>
          </template>
        </el-table-column>
        <el-table-column
        label="操作" v-slot:default="scope">
          <template>
            <el-button type="primary" icon="el-icon-edit" @click="editCurrentOrder(scope.row)" :disabled="scope.row.finish">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
  <!--    编辑订单信息的对话框-->
      <el-dialog title="收货地址" :visible.sync="editOrderDialogVisible" @close="closeEidtOrderDialog">
        <el-form :model="activeOrderInfo">
          <el-form-item label="承担物流">
            <el-input v-model="activeOrderInfo.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="物流状态">
            <el-input v-model="activeOrderInfo.info" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editOrderDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEdition">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Orders',
  created() {
    this.getMerchantOrdersList()
  },
  data() {
    return {
      // 保留该店铺接到的商品订单信息
      ordersList: [],
      // 控制编辑订单信息的对话框是否可见
      editOrderDialogVisible: false,
      // 当前被激活的订单对象
      activeOrderInfo: {}
    }
  },
  methods: {
    async getMerchantOrdersList() {
      if (!sessionStorage.getItem('id')) return this.$message.error('状态异常，请重新登录')
      const { data: res } = await this.$http.get('/merchant/orders', {
        params: {
          mid: sessionStorage.getItem('id')
        }
      })
      if (res.meta.status !== 200) return this.$message.error('获取订单信息失败')
      this.ordersList = res.recordset
    },
    // 编辑按钮被点击时触发
    editCurrentOrder(orderObj) {
      this.activeOrderInfo = {
        id: orderObj.logisticid,
        name: orderObj.com,
        info: orderObj.state
      }
      this.editOrderDialogVisible = true
    },
    // 编辑当前订单的Dialog对话框被关闭时触发
    closeEidtOrderDialog() {
      this.editOrderDialogVisible = false
    },
    // 提交当前订单编辑信息
    async submitEdition() {
      const { data: res } = await this.$http.put('/merchant/modifylogi', this.activeOrderInfo)
      if (res.meta.status !== 200) return console.log(res)
      this.$message.success('修改物流信息成功')
      this.editOrderDialogVisible = false
      this.getMerchantOrdersList()
    }
  }
}
</script>

<style scoped>
.el-table__expanded-cell div {
  padding: 10px 40px;
}
</style>
